﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<meta content="telephone=no" name="format-detection">
		<meta content="email=no" name="format-detection">
		<title>小票抽奖</title>
		<link rel="stylesheet" href="css/index.css" />
		<script src="js/adaptation.js"></script>
	</head>
	<body>
		<div id="wrap">
			<a href="javascript:void(0);" class="logo">
				<img src="images/assets/logo.png" alt="" />
			</a>
			<a href="javascript:void(0);" class="rules ui-rule"></a>
			<img src="images/assets/slogon.png" alt="" class="slogan"/>
			<!--游戏-->
			<div class="game-box">
				<ul class="prize-list">
					<li>小米移动电源</li>
					<li>谢谢参与</li>
					<li>小米智能双轮体感平衡车</li>
					<li>谢谢参与</li>
					<li>谢谢参与</li>
					<li>500积分</li>
					<li>谢谢参与</li>
					<li>iPhone6s Plus</li>
					<li>QQ公仔</li>
					<li>谢谢参与</li>
				</ul>
			</div>
			<div class="ui-txt-1"></div>
			<input type="text" class="rcode"/>
			<br />
			<a href="javascript:void(0);" class="ui-lottery"></a>
		</div>
		
		<div style="display: none;">
			<!--验证手机号-->
			<div id="validate-box">
				<div class="title">需要验证手机号才可以开始抽奖</div>
				<div class="ui-item">
					<input type="tel" id="phone" placeholder="请输入手机号" maxlength="11"/>
				</div>
				<div class="ui-item">
					<input type="text" placeholder="验证码" id="vcode"/>
					<a href="javascript:void(0);" class="ui-send">发送</a>
				</div>
				<div class="btn-group">
					<a href="javascript:void(0);" class="ui-validate"></a>
				</div>
			</div>
			
			<!--活动规则-->
			<div id="rule-box">
				<h3 class="title">
					<div class="ui-rule-title"></div>
				</h3>
				<div class="scroll">
					<div class="content">
						<p>1、活动规则活动规则活动规则活动规则活动规则活动规则</p>
						<p>1、活动规则活动规则活动规则活动规则活动规则活动规则</p>
						<p>1、活动规则活动规则活动规则活动规则活动规则活动规则</p>
						<p>1、活动规则活动规则活动规则活动规则活动规则活动规则</p>
						<p>1、活动规则活动规则活动规则活动规则活动规则活动规则</p>
						<p>1、活动规则活动规则活动规则活动规则活动规则活动规则</p>
						<p>1、活动规则活动规则活动规则活动规则活动规则活动规则</p>
						<p>1、活动规则活动规则活动规则活动规则活动规则活动规则</p>
						<p>1、活动规则活动规则活动规则活动规则活动规则活动规则</p>
						<p>1、活动规则活动规则活动规则活动规则活动规则活动规则</p>
						<p>1、活动规则活动规则活动规则活动规则活动规则活动规则</p>
						<p>1、活动规则活动规则活动规则活动规则活动规则活动规则</p>
						<p>1、活动规则活动规则活动规则活动规则活动规则活动规则</p>
						<p>1、活动规则活动规则活动规则活动规则活动规则活动规则</p>
						<p>1、活动规则活动规则活动规则活动规则活动规则活动规则</p>
						<p>1、活动规则活动规则活动规则活动规则活动规则活动规则</p>
					</div>
				</div>
				<a href="javascript:void(0);" class="ui-home layer-close"></a>
			</div>
			
			<!--中奖-->
			<div id="result-box-1">
				<div class="title">恭喜您获得了</div>
				<p class="prize-name">奖品的名字</p>
				<p class="tip">奖品已经转入您的印象城会员卡中</p>
				<div class="btn-group">
					<!--查看奖励，印象城外链-->
					<a href="javascript:void(0);" class="ui-prize"></a>
					<a href="javascript:void(0);" class="ui-continue layer-close"></a>
				</div>
			</div>
			
			<!--未中奖-->
			<div id="result-box-2">
				<div class="title">很遗憾，没有获得奖品</div>
				<p class="tip">7月25日-8月25日，购物满100元，即可凭小票上的抽奖码参与抽奖。</p>
				<div class="btn-group">
					<a href="javascript:void(0);" class="ui-continue layer-close"></a>
				</div>
			</div>
			
			<!--抽奖码已使用过-->
			<div id="result-box-3" class="result-box">
				<div class="msg">该抽奖码已使用过</div>
				<div class="btn-group">
					<a href="javascript:void(0);" class="ui-sure layer-close"></a>
				</div>
			</div>
			
			<!--抽奖码已过期-->
			<div id="result-box-4" class="result-box">
				<div class="msg">抽奖码已过期</div>
				<div class="btn-group">
					<a href="javascript:void(0);" class="ui-sure layer-close"></a>
				</div>
			</div>
			
			<!--无效的抽奖码-->
			<div id="result-box-5" class="result-box">
				<div class="msg">无效的抽奖码</div>
				<div class="btn-group">
					<a href="javascript:void(0);" class="ui-sure layer-close"></a>
				</div>
			</div>
			
			<!--次数用完-->
			<div id="result-box-6">
				<div class="tip">您今天已经抽过3次了,<br />7月25日-8月25日，每天可抽奖3次。</div>
				<div class="btn-group">
					<a href="javascript:void(0);" class="ui-sure layer-close"></a>
				</div>
			</div>
		</div>
		
		<script src="js/zepto.min.js"></script>
		<script src="js/luckDraw.js"></script>
		<script src="js/layer/layer.js"></script>
		<script src="js/iscroll.js"></script>
		<script>
			;$.isPC = navigator.platform.indexOf('Win') >= 0 ? true : false;

			var CLICK = $.isPC ? 'click' : 'touchstart';
			
			var remind = function(content,time){
				var str= '<div class="modal"><div id="remind" class="icon-remind-bg"><div class="content">'+content+'</div></div></div>';
				$('body').append(str);
				var time = time?time:1500;
				setTimeout(function(){
					$(".modal").remove();
				},time);
			};
			
			$(function(){
				var isValidated = true;     //是否验证过手机 默认false
				
				//验证手机
				if(!isValidated){
					layer.open({
						content: $("#validate-box")[0].outerHTML,
						shadeClose: false
					});
				}
				
				//发送验证码
				var isWating = false;
				var wait = 60;
				
				$(document).on(CLICK,'.ui-send',function(){
					var phone = $(".layermbox #phone").val();
					if(phone==""){
						remind("请输入手机号");
						return;
					}
					if (!/^1[34578]\d{9}/.test(phone)) {
						remind('请输入正确的手机号码');
						return;
					}
					
					if(!isWating){
						isWating = true;
						var cd = setInterval(function(){
							if(wait==0){
								clearInterval(cd);
								isWating = false;
								$(".ui-send").text("发送");
								wait = 60;
								return false;
							}
							$(".ui-send").text(wait);
							wait--;
						},1000);
						
						$.ajax({
							type:"get",
							url:"data/validate.json",
							dataType: 'json',
							data: {},
							success: function(data){
								remind("验证码已发送到手机");
							}
						});
					}else{
						remind("你已经获取过了，请稍后再重新获取")
					}
				});
				
				//提交手机号
				$(document).on(CLICK,'.ui-validate',function(){
					var phone = $(".layermbox #phone").val();
					var vcode = $(".layermbox #vcode").val();
					
					if(phone==""){
						remind("请输入手机号");
						return;
					}
					if(vcode==""){
						remind("请输入验证码");
						return;
					}
					if (!/^1[34578]\d{9}/.test(phone)) {
						remind('请输入正确的手机号码');
						return;
					}
					
					$.ajax({
						type:"get",
						url:"data/validate.json",
						dataType: 'json',
						data: {},
						success: function(data){
							layer.closeAll();
							remind("手机号验证成功");
						}
					});
				});
				
				//规则
				$(".rules").on(CLICK,function(){
					layer.open({
						content: $("#rule-box")[0].outerHTML,
						shadeClose: false
					});
					
					myScroll = new IScroll('.layermbox .scroll',{ 
						scrollY: true,
						scrollbars: 'custom',
						preventDefaultException: { tagName: /^(DIV|IMG|A|BUTTON|INPUT)$/ }
					});
				});
				
				//返回首页
				$(document).on('click','.layer-close',function(){
					layer.closeAll();
				});
				
				var lotteryResult;
				
				//实例幸运抽奖
				var Ld = new LuckDraw($('.prize-list'),{
					row : 3, //行
					column : 4, //列
					spacing: 0, //空隙
					time: 3 ,//匀速运动的时间,
					end:function(e){
						if(lotteryResult.status==1){
							var prizeName = lotteryResult.prize;
							$("#result-box-1 .prize-name").text(prizeName)
							layer.open({
								content: $("#result-box-1")[0].outerHTML,
								shadeClose: false
							});
						}else{
							layer.open({
								content: $("#result-box-2")[0].outerHTML,
								shadeClose: false
							});
						}
					}
				});
				
				Ld.init();
				
				//开始抽奖
				/**
				 * 接口返回参数
				 * status {1:"中奖",2:"未中奖",3:"抽奖码已使用过",4:"抽奖码已过期",5:"无效的抽奖码",6:"抽奖次数用完"}
				 * prize: 奖品名称
				 * 
				 * */
				$(".ui-lottery").on(CLICK,function(){
					var rcode = $(".rcode").val();
					if(rcode==""){
						remind("请输入抽奖码");
						return;
					}
					
					var options = Ld.options;
					if(options.flg){
						return ;
					}
					
					$.ajax({
						type:"get",
						url:"data/lottery.json",
						dataType: "json",
						data: {rcode:rcode},
						success: function(data){
							var status = data.status;
							lotteryResult = data;
							switch(status){
								case 1: 
									Ld.setTarget(data.tar);
									Ld.start();
									options.flg = true;
									break;
								case 2: 
									Ld.setTarget(data.tar);
									Ld.start();
									options.flg = true;
									break;
								case 3: 
									layer.open({
										content: $("#result-box-3")[0].outerHTML,
										shadeClose: false
									});
									break;
								case 4: 
									layer.open({
										content: $("#result-box-4")[0].outerHTML,
										shadeClose: false
									});
									break;
								case 5: 
									layer.open({
										content: $("#result-box-5")[0].outerHTML,
										shadeClose: false
									});
									break;
								case 6: 
									layer.open({
										content: $("#result-box-6")[0].outerHTML,
										shadeClose: false
									});
									break;
							}
						},
						error: function(err){
							remind("服务异常，请联系管理员");
						}
					});
				});
			});
		</script>
	</body>
</html>